import React, { useEffect, useState } from 'react'
import {
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
  DesktopOutlined,
  FileOutlined,
  SettingOutlined,
  PieChartOutlined,
  TeamOutlined,
  // UserOutlined
} from '@ant-design/icons';
import { Layout, Menu, theme } from 'antd';
import './index.css'
import { withRouter } from 'react-router-dom/cjs/react-router-dom.min';
import axios from 'axios'
const { Header, Sider, Content } = Layout;

function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
    // disabled: true,
  };
}
// const items = [
//   getItem('首页', '/home', <UserOutlined />),
//   getItem('用户管理', '/user-manage', <DesktopOutlined />, [
//     getItem('用户列表', '/user-manage/list', <DesktopOutlined />),
//   ]),
//   getItem('权限管理', '/right-manage', <UserOutlined />, [
//     getItem('角色列表', '/right-manage/role/list', <UserOutlined />),
//     getItem('权限列表', '/right-manage/right/list', <UserOutlined />),
//   ]),
//   // getItem('新闻管理', 'sub2', <TeamOutlined />, [
//   //   getItem('Team 1', '6'), getItem('Team 2', '8')
//   // ]),
//   // getItem('审核管理', '9', <FileOutlined />),
//   // getItem('发布管理', 'sub2', <TeamOutlined />, [
//   //   getItem('Team 1', '6'), getItem('Team 2', '8')
//   // ]),
// ];

const iconmap = {
  "/home": <UserOutlined />,
  "/user-manage": <SettingOutlined />,
  "/user-manage/add": <SettingOutlined />,
  "/user-manage/delete": <SettingOutlined />,
  "/user-manage/update": <SettingOutlined />,
  "/user-manage/list": <SettingOutlined />,
  "/right-manage": <SettingOutlined />,
  "/right-manage/role/list": <SettingOutlined />,
  "/right-manage/right/list": <SettingOutlined />,
  "/right-manage/role/update": <SettingOutlined />,
  "/right-manage/role/delete": <SettingOutlined />,
  "/right-manage/right/update": <SettingOutlined />,
  "/right-manage/right/delete": <SettingOutlined />,
  "/news-manage": <SettingOutlined />,
  "/news-manage/list": <SettingOutlined />,
  "/news-manage/add": <SettingOutlined />,
  "/news-manage/update/:id": <SettingOutlined />,
  "/news-manage/preview/:id": <SettingOutlined />,
  "/news-manage/draft": <SettingOutlined />,
  "/news-manage/category": <SettingOutlined />,
  "/audit-manage": <PieChartOutlined />,
  "/audit-manage/audit": <PieChartOutlined />,
  "/audit-manage/list": <PieChartOutlined />,
  "/publish-manage": <TeamOutlined />,
  "/publish-manage/unpublished": <TeamOutlined />,
  "/publish-manage/published": <TeamOutlined />,
  "/publish-manage/sunset": <TeamOutlined />
}

function SideMenu(props) {
  const token = localStorage.getItem("token")
  // 一个简单的抛出异常，可以在脚本任何地方，会被 `onError` 捕获
  try {
    JSON.parse(token)
  } catch (e) {
    console.log(e);
    localStorage.removeItem("token")
    props.history.push("/login")
  }

  const { role: { rights } } = JSON.parse(token)
  const [items, setItems] = useState([])

  const checkPagePermision = (item) => {
    return item.pagepermisson === 1 && rights.includes(item.key)
  }

  useEffect(() => {
    axios.get("/rights?_embed=children").then(res => {

      let menulist = []
      res.data.forEach((item, index, arr) => {
        if (checkPagePermision(item)) {
          let params = [item.title, item.key, iconmap[item.key]]
          if (item.children) {
            let submenulist = []
            item.children.forEach((item2, index, arr) => {

              if (checkPagePermision(item2)) {
                submenulist.push(getItem(item2.title, item2.key, iconmap[item.key]))
                params.push(submenulist)
              }
            })
          }
          menulist.push(getItem(...params))
        }
      })
      setItems(menulist)
    })
  }, [])


  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const onClick = (e) => {
    props.history.push(e.key)
  };

  return (
    <Sider trigger={null} collapsible collapsed={props.collapsed}>
      <div style={{ display: "flex", height: "100%", "flexDirection": "column" }}>
        <div className="logo">全球新闻发布管理系统</div>
        <div style={{ flex: 1, overflow: "auto" }}>
          <Menu
            theme="dark"
            mode="inline"
            selectedKeys={[props.location.pathname]} //默认选中
            defaultOpenKeys={['/' + props.location.pathname.split('/')[1]]}
            // subMenuOpenDelay="1"
            items={items}
            onClick={onClick}
          />
        </div>
      </div>
    </Sider>
  )
}

export default withRouter(SideMenu)